<template>
    <div>
        <ul>
            <!-- 声明式导航方式 -->
            <!-- <router-link custom :to="'/detail/' + item.filmId" v-slot="{ navigate }" v-for="(item, index) in datalist"
                :key="item.filmId">
                <li @click="navigate">{{ item.name }}</li>
            </router-link> -->
            <!-- 编程式导航 -->
            <li v-for="(item, index) in datalist" :key="item.filmId" @click="handleClick(item.filmId)">
                {{ item.name }}
            </li>
        </ul>
    </div>
</template>
<!-- <script>
import axios from 'axios'
import { onMounted, ref } from 'vue';
export default {
    data() {
        return {
            datalist: []
        }
    },
    async mounted() {
        const res = await axios({
            url: "https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=7463219",
            headers: {
                "X-Client-Info": '{ "a": "3000", "ch": "1002", "v": "5.2.1", "e": "16927511235634589070458881", "bc": "110100" }',
                "X-Host": 'mall.film-ticket.film.list'
            }
        })
        console.log(res.data);
        this.datalist = res.data.data.films
    },
    methods: {
        handleClick(id) {
            // 编程式导航
            //第一类
            //第一种写法：路径+路由参数
            this.$router.push(`/detail/${id}`)

            //第二种写法：路径+路由参数 对象写法
            // this.$router.push({
            //     name: "Detail",
            //     params: {
            //         myid: id
            //     }
            // })

            //第二类
            //路径+query    query传参
            // this.$router.push({
            //     path: '/detail',
            //     query: {
            //         myid: id
            //     }
            // })
        }
    }
}
</script> -->

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios';
import { useRouter } from 'vue-router';

const datalist = ref([])
const router = useRouter()

onMounted(async () => {
    const res = await axios({
        url: "https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=7463219",
        headers: {
            "X-Client-Info": '{ "a": "3000", "ch": "1002", "v": "5.2.1", "e": "16927511235634589070458881", "bc": "110100" }',
            "X-Host": 'mall.film-ticket.film.list'
        }
    })
    console.log(res.data);
    datalist.value = res.data.data.films
})

const handleClick = (id) => {
    router.push(`/detail/${id}`)
}

</script>

<style lang="scss" scoped>
ul {
    li {
        padding: 10px;
    }
}
</style>